<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
       <!--{{firstName}}.{{lastName}}-->
    <div>{{fullName}}</div>
     <div>渲染次数：{{counter}}</div>
    <div>
        <input v-model="firstName"/>-<input v-model="lastName"/>
    </div>
    <div><input v-model="other"/></div>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
    new Vue({
         el:'#app',
         data:{
               firstName:'firstName',
               lastName:'lastName',
               other:'other',
               counter:0
         },computed:{
             fullName:function () {
                 this.counter+=1;
                 return this.firstName+"."+this.lastName;
             }
        }
    })
</script>
</html>